<template>
  <div :class="`navigate-crumbs-menu nav-crumb ${componentStyle}-Style`">
    <el-button
      :link="true"
      type="primary"
      icon="Back"
      class="back-button"
      :disabled="backDisabled"
      @click="handleBack"
    ></el-button>
    <el-divider direction="vertical"></el-divider>
    <div class="crumbs-content">
      <div
        v-for="(bRegion, index) in brumbRegions"
        :key="index"
        :class="{
          arrow: brumbRegions.length > 1,
          'can-drill': bRegion.canClick && index != brumbRegions.length - 1,
          isLast: index === brumbRegions.length - 1,
        }"
      >
        <span
          v-show="index !== 0"
          class="separator"
        >></span>
        <span
          style="user-select: none;"
          class="region-name"
          @click="bRegion.canClick && changeRegion(bRegion)"
        >
          {{ bRegion.name }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';

export default {
  name: 'NavigateBreadCrumbs',
  props: ['parentId', 'widgetId', 'widgetInstanceId', 'widgetName', 'identifier', 'layout', 'componentStyle'],
  data() {
    return {
      active: false,
      brumbRegions: [],
      preLevel: '',
    };
  },
  computed: {
    ...mapState({
      loginRegionCode: state => state.RegionModule.loginRegionCode,
      regions: state => state.RegionModule.allRegions || [],
      currentRegion: state => state.RegionModule.currentRegionCode,
    }),
    backDisabled() {
      // 权限以上的层级不允许后退
      let loginLevelDisabled = false;
      const obj = this.regions.find(item => item.code === this.currentRegion);
      const loginRegion = this.regions.find(r => r.code === this.loginRegionCode);
      if (loginRegion) {
        const loginRegionLevel = loginRegion.level;
        loginLevelDisabled = obj.level - 1 < loginRegionLevel;
      }
      const disabled = this.brumbRegions.length <= 1 || loginLevelDisabled;
      return disabled;
    },
  },
  watch: {
    currentRegion(newRegion, oldRegion) {
      if (newRegion && newRegion !== oldRegion) {
        this.loadWidget();
      }
    },
  },
  created() {
    this.loadWidget();
  },
  methods: {
    ...mapActions(['setCurrentRegion']),

    handleBack() {
      const allRegionCode = [];
      this.brumbRegions.forEach(item => {
        allRegionCode.push(item.code);
      });
      const index = allRegionCode.indexOf(this.currentRegion);
      if (index > 0) {
        this.setCurrentRegion(allRegionCode[index - 1]);
        this.loadWidget();
      }
    },
    changeRegion(region) {
      this.setCurrentRegion(region.code);
      this.loadWidget();
    },

    loadWidget() {
      const currentRegion = this.regions.find(r => String(r.code) === String(this.currentRegion));

      if (!this.preLevel) {
        this.preLevel = currentRegion.level;
      }

      let brumbRegions = [];
      const regionCode = JSON.parse(JSON.stringify(this.currentRegion));

      // 找出自己及父区域
      const findParentRegion = (_regionCode, optRegions) => {
        const region = this.regions.find(r => r.code === _regionCode);
        if (region) {
          optRegions.push(region);
          if (region.parentCode) {
            findParentRegion(region.parentCode, optRegions);
          }
        }
      };

      // 查找面包屑
      findParentRegion(regionCode, brumbRegions);

      // 可查看的区域权限
      if (brumbRegions.length) {
        for (let j = 0; j < brumbRegions.length; j++) {
          brumbRegions[j].canClick = true;
        }
      }

      // 按从父到子进行区域输出
      brumbRegions = brumbRegions.reverse();

      // 找出该账号禁止点击的region
      const loginRegion = this.regions.find(r => r.code === this.loginRegionCode);
      if (loginRegion) {
        const loginRegionLevel = loginRegion.level;
        brumbRegions.forEach(b => {
          if (b.level < loginRegionLevel) {
            b.canClick = false;
          }
        });
      }

      // 当前选中的面包屑不可点击（即最后一个不可点击）
      brumbRegions[brumbRegions.length - 1].canClick = false;
      this.brumbRegions = brumbRegions;
    },
  },
};
</script>
<style lang="less" scoped>
@import './theme.less';
.navigate-crumbs-menu {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 9;
}
.can-drill {
  cursor: pointer !important;
}
.nav-crumb {
  font-size: 15px;
  white-space: nowrap;
  text-align: left;
  color: var(--nav-crumb-color);
  background-color: var(--nav-crumb-bg-color);
  .back-button {
    color: var(--back-btn-color);
    display: inline-block;
    margin: 3px 0 3px 5px;
    padding: 0;
    background: transparent;
    border-color: transparent !important;
  }
  :deep(.el-divider--vertical) {
    margin: 0 8px 4px;
  }
  .crumbs-content {
    margin: 0 10px 0 0;
    display: inline-block;
    & > div {
      cursor: default;
      position: relative;
      display: inline-block;
      margin-right: 5px;
      height: 24px;
      line-height: 24px;
      &.isLast{
        .region-name{
          color: var(--last-region-name);
        }
      }
    }
    .separator {
      margin: 0 5px 0 0;
    }
  }
}
</style>
